<script setup lang="ts">
import { onMounted, ref, reactive,getCurrentInstance  } from 'vue';
import { NGi, NGrid, NSpin } from 'naive-ui';
import { useUserStore } from '@/stores/user';
import { useOrderStore } from '@/stores/order';
import { useRouter } from 'vue-router';
const userStore = useUserStore();
const oredrStore = useOrderStore();
const app = getCurrentInstance();
const isMobile = app?.appContext.config.globalProperties.$isMobile;
const router = useRouter();
const show = ref(false);
const mealList = reactive([
    {
        product_name: "Monthly",
        product_id: "mateLink.paypal.month.pro.plan", // 产品ID
        rawPrice: 19.99, // 金额大小
        currencyCode: "USD", // 金额类别
        pay_platform: "paypal_sub", //订阅平台 一定要是这个
        active: true,
        popular: false,
        months: 1
    }, {
        product_name: "Yearly",
        product_id: "mateLink.paypal.year.pro.plan", // 产品ID
        rawPrice: 5.83, // 金额大小
        currencyCode: "USD", // 金额类别
        pay_platform: "paypal_sub", //订阅平台 一定要是这个
        active: false,
        popular: true,
        months: 12
    }
])
const active = ref(mealList[0])
const choosePlan = (item: any, i: number) => {
    mealList.forEach((item: any) => {
        item.active = false;
    });
    mealList[i].active = true;
    active.value = item;
};
const paypal = async () => {
    window.location.href = 'https://matelink.ai/girlfriend/1fphcl5g';
    return;
    if (!userStore.Token) {
        userStore.isPopupLogin = true;
    } else {
        show.value = true;
        const data: any = await oredrStore.getProPay({
            product_id: active.value.product_id, // 产品ID
            rawPrice: active.value.rawPrice * active.value.months, // 金额大小
            currencyCode: "USD", // 金额类别
            pay_platform: "paypal_sub", //订阅平台 一定要是这
            is_web: true
        });
        show.value = false;
        if (data.code == 200 && data.data.approve_url != '') {
            console.log(data.data.approval_url)
            window.location.href = data.data.approval_url;
        }
    }
};
const prev = () => {
    router.push({ path: '/' });
};
</script>

<template>
    <div class="becomePro">
        <div class="goHome" v-if="isMobile">
            <img src="@/assets/images/prev_icon.svg" class="prev" @click="prev" />
            <span>Become Pro</span>
        </div>
        <div class="proCont">
            <NSpin :show="show">
                <div class="proContLeft">
                    <p class="title">
                        <img src="@/assets/images/title_bg.svg" alt="" />
                        <span>Choose your Plan</span>
                    </p>
                    <p class="desc">You can cancel anytime, privacy in bank statement</p>
                    <div class="mealList">
                        <div v-for="(item, i) in mealList" :class="item.active ? 'mealCont active' : 'mealCont'"
                            @click="choosePlan(item, i)">
                            <p class="productName">{{ item.product_name }}<span v-if="item.product_name == 'Yearly'"
                                    class="desc">Save 70%</span></p>
                            <p class="productPrice"><span>${{ item.rawPrice }}</span> / month</p>
                            <p class="tips" v-if="item.popular">Popular</p>
                        </div>
                    </div>
                    <p class="btn" @click="paypal">Subscribe</p>
                    <img src="@/assets/images/becomeImg.png" class="addImg"/>
                </div>
            </NSpin>
            <div class="proContRight">
                <p class="title">Pro Benefits</p>
                <div class="benefitsList">
                    <p>
                        <img src="@/assets/images/tick_icon.svg" alt="" />
                        <span>1000 Messages / Day</span>
                    </p>
                    <p>
                        <img src="@/assets/images/tick_icon.svg" alt="" />
                        <span>Chat History</span>
                    </p>
                    <p>
                        <img src="@/assets/images/tick_icon.svg" alt="" />
                        <span>Fast response time</span>
                    </p>
                    <p>
                        <!-- <img src="@/assets/images/tick_icon.svg" alt="" /> -->
                        <span>🔥 NSFW</span>
                    </p>
                    <p>
                        <!-- <img src="@/assets/images/tick_icon.svg" alt="" /> -->
                        <span>🌟 Premium Models</span>
                    </p>
                    <p>
                        <!-- <img src="@/assets/images/tick_icon.svg" alt="" /> -->
                        <span>📸 Unlimited Photos</span>
                    </p>
                    <p>
                        <!-- <img src="@/assets/images/tick_icon.svg" alt="" /> -->
                        <span>🗣︎ Listen to Voice Messages</span>
                    </p>
                </div>
            </div>
            
            <img src="@/assets/images/becomeImg.png" class="footerImg" v-if="isMobile"/>
        </div>
    </div>
</template>
<style lang="less" scoped>
.becomePro {
    width: 100%;
    height: 100%;
    background: #13102b;
    overflow: auto;
    padding-top: 142px;
&::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .proCont {
        width: 1.9rem;
        height: 600px;
        margin: 0 auto;
        display: flex;

        .proContLeft {
            color: #fff;
            width: 1.15rem;

            .title {
                position: relative;
                margin-bottom: 0.08rem;

                img {
                    position: absolute;
                    top: 75%;
                    left: 50%;
                    transform: translateX(-50%);
                }

                span {
                    font-size: 0.108rem;
                    font-weight: 700;
                    position: relative;
                    z-index: 1;
                    text-align: center;
                    display: inline-block;
                    width: 100%;
                }
            }

            .desc {
                font-size: 0.048rem;
                line-height: 0.068rem;
                font-weight: 600;
            }

            .mealList {
                .mealCont {
                    width: 1rem;
                    height: 0.31rem;
                    box-sizing: border-box;
                    padding: 0.032rem 0.064rem;
                    border: 2px solid rgba(255, 255, 255, 0.1);
                    background: rgba(255, 255, 255, 0.1);
                    border-radius: 0.048rem;
                    margin-top: 0.048rem;
                    cursor: pointer;
                    position: relative;

                    .productName {
                        font-size: 0.06rem;
                        font-weight: 700;
                        color: #FF8C39;

                        .desc {
                            font-size: 0.036rem;
                            font-weight: 600;
                            color: #fff;
                            margin-left: 4px;
                            background: linear-gradient(135deg, rgba(141, 44, 255, 0.15) 7.86%, rgba(238, 47, 93, 0.15) 50.71%, rgba(255, 39, 208, 0.15) 100%);
                            width: 0.22rem;
                            height: 0.068rem;
                            display: inline-block;
                            text-align: center;
                            border-radius: 0.048rem;
                            border: 2px solid #F52D8A;
                            line-height: 0.06rem;
                        }
                    }

                    .productPrice {
                        line-height: 0.14rem;
                        font-size: 0.06rem;
                        font-weight: 700;
                        color: #AAA6A1;

                        span {
                            font-size: 0.1rem;
                            font-weight: 600;
                            color: #fff;
                        }
                    }

                    .tips {
                        width: 0.188rem;
                        height: 0.068rem;
                        border-radius: 0.024rem;
                        box-sizing: border-box;
                        background: linear-gradient(135.85deg, #FFCC00 37.93%, #EB34C3 99.56%);
                        text-align: center;
                        color: #fff;
                        font-size: 0.036rem;
                        font-weight: 600;
                        line-height: 0.068rem;
                        position: absolute;
                        top: -10px;
                        right: 20px;
                    }
                }

                .active {
                    background: linear-gradient(114.24deg, rgba(255, 181, 36, 0.1) 16.28%, rgba(255, 140, 57, 0.1) 94.9%);
                    border: 2px solid #FFCC00;
                }
            }

            .btn {
                width: 1rem;
                height: 0.136rem;
                border-radius: 24px;
                background: linear-gradient(114.24deg, #FFB524 16.28%, #FF8C39 94.9%);
                margin-top: 0.064rem;
                font-size: 0.048rem;
                font-weight: 700;
                text-align: center;
                line-height: 0.136rem;
                color: #000;
                cursor: pointer;
            }
            .addImg{
                display: block;
                margin-top: 0.094rem;
                margin-left: 0.13rem;
                width: 66%;
            }
        }

        .proContRight {
            margin-top: 0.366rem;
            flex: 1;

            .title {
                color: #FFB524;
                font-size: 0.072rem;
                font-weight: 700;
                padding-left: 0.072rem;
            }

            .benefitsList {
                p {
                    height: 0.06rem;
                    color: #fff;
                    margin-top: 0.034rem;
                    display: flex;
                    align-items: center;

                    img {
                        // margin-right: 4px;
                    }

                    span {
                        font-size: 0.036rem;
                        font-weight: 600;

                        img {
                            margin-right: 0;
                        }
                    }

                    .label {
                        color: #D62F86;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .becomePro {
        padding: 0;
        .goHome {

background: rgba(255, 255, 255, 0.1);
height: 0.58rem;
display: flex;
align-items: center;
font-size: 0.14rem;
color: #fff;
}
        .proCont {
            width: 100%;
            height: auto;
            padding: 0 0.29rem;
            margin: 0;
            display: block;

            .proContLeft {
                width: 100%;

                .title {
                    margin-bottom: 0.1rem;

                    img {
                        width: 60%;
                    }

                    span {
                        font-size: 0.35rem;
                    }
                }

                .desc {
                    font-size: 0.16rem;
                    line-height: 0.22rem;
                }

                .mealList {
                    display: flex;
                    justify-content: space-between;

                    .mealCont {
                        width: 1.58rem;
                        padding: 0.1rem 0 0.1rem 0.2rem;
                        height: auto;
                        margin-top: 0.21rem;

                        .productName {
                            font-size: 0.2rem;
                            .desc {
                                font-size: 0.1rem;
                                height: 0.2rem;
                                line-height: 0.15rem;
                                width: auto;
                                padding: 0 0.1rem;
                            }
                        }

                        .productPrice {
                            font-size: 0.2rem;
                            line-height: 1;

                            span {
                                font-size: 0.33rem;
                                line-height: 0.48rem;
                            }
                        }

                        .tips {
                            width: 0.6rem;
                            height: 0.22rem;
                            border-radius: 0.08rem;
                            font-size: 0.12rem;
                            line-height: 0.22rem;
                            right: 0;
                            top: -0.12rem;
                        }
                    }
                }

                .btn {
                    width: 100%;
                    height: 0.45rem;
                    border-radius: 0.22rem;
                    margin-top: 0.2rem;
                    font-size: 0.16rem;
                    line-height: 0.45rem;
                }
                
                .addImg {
                    display: none;
                }
            }

            .proContRight {
                margin-top: 0.2rem;
                width: 100%;

                .title {
                    font-size: 0.36rem;
                    padding-left: 0.38rem;

                }

                .benefitsList {
                    p {
                        margin-top: 0.12rem;
                        height: 0.3rem;

                        img {
                            width: 0.24rem;
                        }

                        span {
                            font-size: 0.18rem;
                        }
                    }
                }
            }
            .footerImg{
                width: 100%;
                margin: 0.3rem 0;
            }
        }
    }

}
</style>